<template>
    <div class="expert-number">
        <div v-for="(item,index) in innerData" :key="index" class="expert-box">
            <img :src="item.selecturl? item.selecturl : ''" alt="">
            <span>{{item[props.label]}}</span>
            <el-input-number v-model="item.num" controls-position="right" @change="handleChange" :min="0" :max="10" size="mini"></el-input-number>
        </div>

    </div>
</template>

<script>
export default {
    name: '',
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        props: {
            type: Object,
            default: () => ({
                label: 'dicname',
                value: 'diccode',
            }),
        },
    },
    data() {
        return {
            num: 1,
        };
    },
    computed: {
        innerData: function () {
            return this.data.map((item) => {
                this.$set(item, 'num', 0);
                return item;
            });
        },
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },

    mounted() {},
    methods: {
        handleChange(currentValue, oldValue) {
            this.countNum();
        },
        countNum(){
            let middlenum = 0;
            let seniornum = 0;
            let SumNum = 0;
            this.innerData.forEach(item => {
                SumNum = parseFloat((SumNum + item.price * item.num).toFixed(2));

                if(item.code === 'middle'){
                    middlenum = item.num;
                }
                if(item.code === 'senior'){
                    seniornum = item.num;
                }
            });

            this.$emit('update:SumNum', SumNum);
            this.$emit('update:middlenum', middlenum);
            this.$emit('update:seniornum', seniornum);
        },

    },
};
</script>

<style lang="scss" scoped>
.expert-number {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .expert-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 20px;
        span{
            margin: 0 5px;
        }

        img {
            width: 18px;
            height: 18px;
        }
    }
}
</style>

